import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './index.less';
import { Empty } from 'antd';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar'; //柱状图
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'; //提示框
import 'echarts/lib/component/title'; //标题
import 'echarts/lib/component/legend'; //图例
import 'echarts/lib/component/legendScroll'; //图例
import 'echarts/lib/component/dataZoom'; //图例
/**
 * 柱状图
 * @param props
 * @returns {*}
 * @constructor
 */
class RcBarChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myEchart: null,
      noData: false, //是否无数据
      mapOpacity: 0,
      x: [],
      y: [],
    };
  }

  componentDidMount() {
    //页面加载的时候点开就可以展示，加载完成之后再点开就不能展示
    this.setState(
      {
        myEchart: echarts.init(window.document.getElementById(this.props.id)),
      },
      () => {
        window.addEventListener('resize', () => {
          this.state.myEchart.resize();
        });
        // this.state.myEchart.showLoading({ text: '数据加载中' });
        this.state.myEchart.on('click', (data) => {
          this.props.click && this.props.click(data);
        });
      },
    );
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.xData.length > 0 && nextProps.xData[0] === null) {
      return;
    }
    if (
      JSON.stringify(nextProps.yData) === JSON.stringify(this.props.yData) &&
      JSON.stringify(nextProps.xData) === JSON.stringify(this.props.xData)
    ) {
      return;
    }
    if (nextProps.xData.length > 0 && nextProps.yData.length > 0) {
      this.setState(
        {
          noData: false,
          x: nextProps.xData,
          y: nextProps.yData,
        },
        () => {
          this.state.myEchart.clear();
          this.state.myEchart.hideLoading();
          this.getInit();
        },
      );
    } else {
      this.setState(
        {
          noData: true,
        },
        () => {
          this.state.myEchart.clear();
          this.state.myEchart.hideLoading();
        },
      );
    }
  }

  getInit() {
    let option = {
      xAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: 'white',
            fontSize: '12',
          },
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: 'solid',
            color: '#192756', //左边线的颜色
          },
        },
      },
      grid: {
        width: '95%',
        height: '90%',
        top: '2%',
        left: '0%',
        containLabel: true,
      },
      dataZoom: {
        yAxisIndex: 0, //这里是从X轴的0刻度开始,
        show: false, //是否显示滑动条，不影响使用,
        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件,
        startValue: 0, // 从头开始,
        endValue: 5, // 一次性展示6个
      },
      yAxis: {
        type: 'category',
        nameLocation: 'left',
        data: this.state.y,
        splitLine: { show: false },
        axisLabel: {
          textStyle: {
            color: 'white',
            fontSize: '12',
            // align:'left',
            baseline: 'middle',
          },
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: 'kWh',
          type: 'bar',
          data: this.state.x,
          barWidth: 6,
          label: {
            show: true,
            position: 'right',
            color: '#52caff',
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#00F4FF' },
                { offset: 1, color: '#00F4FF' },
              ]),
            },
          },
        },
      ],
    };
    this.state.myEchart.setOption(option);
    window.clearInterval(this.timeOut);
    this.timeOut = setInterval(() => {
      if (option.dataZoom.endValue == this.state.x.length) {
        // option.dataZoom.endValue = 5
        // option.dataZoom.startValue = 0;
        return;
      } else {
        option.dataZoom.endValue = option.dataZoom.endValue + 1;
        option.dataZoom.startValue = option.dataZoom.startValue + 1;
      }
      this.state.myEchart.setOption(option);
    }, 2000);
    // this.state.myEchart.setOption(option);
    this.state.myEchart.hideLoading();
  }

  render() {
    return (
      <div className={styles.rcpiechart}>
        <div id={this.props.id} style={{ width: '100%', height: '100%' }}></div>
        {this.state.noData && (
          <div className={styles.rcempty}>
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
          </div>
        )}
      </div>
    );
  }
}

/*需要的参数*/
RcBarChart.propTypes = {
  stack: PropTypes.bool, //每一条数据是否是叠加在一起的
  barWidth: PropTypes.number, //柱图每一条柱子的宽度
  legendLength: PropTypes.number, //图例显示的个数
  id: PropTypes.string.isRequired, //id
  xData: PropTypes.array.isRequired, //x轴刻度值
  yData: PropTypes.array.isRequired, //数据
  legendName: PropTypes.array, //图例名称
  legendShow: PropTypes.bool, //图例是否显示
  title: PropTypes.string, //标题
  yAxis: PropTypes.object, // Y轴的设置
  grid: PropTypes.object,
  click: PropTypes.func, //点击事件
  color: PropTypes.array, //颜色
  YaxisTick: PropTypes.bool, //y轴刻度线是否展示
  lineShow: PropTypes.bool, //是否展示网格线
};

/*参数的默认值*/
RcBarChart.defaultProps = {
  legendShow: true,
  id: 'bar',
  title: '',
  legendName: [],
  stack: false, //每一条数据是否是叠加在一起的
  barWidth: 20, //柱图每一条柱子的宽度
  yAxis: {},
  grid: {},
  YaxisTick: true,
  lineShow: true,
};

export default RcBarChart;
